<!--
 * @Author: your name
 * @Date: 2021-08-06 09:42:08
 * @LastEditTime: 2021-08-10 17:16:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-ui\src\views\components\login.vue
-->
<template>
    <div class="Box" fixed-inbox="true" fixed-id="2">
        <div class="unlogin">
            <div class="login_box" id="login_form">
                <div class="login_innerwrap">
                    <div class="info_header">
                        <!-- 登录框 -->
                        <!-- 安全登录和登录按钮 -->
                        <div class="clear tab">
                            <a href="javascript:void(0);" 
                            node-type="normal_tab" 
                            action-type="switchTab"
                            action-data="type=normal"
                            class="cur fb">账号登录</a>
                            <a href="javascript:void(0);" 
                            node-type="qrcode_tab" 
                            action-type="switchTab" 
                            action-data="type=qrcode" 
                            class="cur fb">安全登录</a>      
                        </div>
                        <a href="javascript:void(0);"
                             node-type="message_tab" 
                             action-type="switchTab" 
                             action-data="type=message" 
                             class="qrcode_target qrcode_phone"></a> 
                             <!-- 点击切换 -->
                    </div>
                    <!-- /登录框 -->
                    <!-- 扫码登录 -->
                    <div class="login_content" 
                    node-type="qrcode_form"
                    style="display:none">
                    <img src="../image/foot_code.png" 
                    style="height:150;width=150;"
                    node-type="qrcode_src"
                    height="150" width="150">
                    <p class="text1">请用最新微博客户端扫码</p>
                    <div class="info_list info_list1">
                        <span class="text2">还没有微博？</span>
                        <a  target="_blank" href="">立即注册</a>
                    </div>
                    
                    </div>
                    <!-- /扫码登录 -->
                </div>
                    <!-- 账号登录 -->                
                <div class="login_form" 
                    node-type="normal_form"
                    style="">
                    <!-- 账号框 -->
                    <div class="info_list username" 
                    node-type="username_box">
                    <div class="input_wrap">
                        <i class="icon_human"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>   </i>
                        <input id="loginname" type="text" class="W_input"
                        maxlength="128"
                        action-type="text_copy"
                        name="username"
                        node-type="username" tabindex="1">
                    </div>
                    </div>
                    <!-- /账号框 -->
                    <!-- 密码框 -->
                    <div class="info_list password" 
                    node-type="password_box">
                        <div class="input_wrap">
                            <i class="el-icon-lock"> </i>
                            <input type="password" class="W_input"
                            maxlength="24"
                            autocomplete="off"
                            value action-type="text_copy"
                            name="password"
                            node-type="password" tabindex="2" >
                            <!-- <span class="psw" style="">请输入密码</span> -->
                        </div>
                    </div>
                    <!-- /密码框 -->
                    <!-- 忘记密码 -->
                    <div class="info_list auto_login clearfix">
                        <div class="fr right">
                        <a href="javascript:void(0);"
                        onclick="var loginname=docment.getElementByLd('loginname').value;
                        window.open('');"
                        node-type="btn_password_recover"
                        suda-data="key="
                         class="text2">忘记密码</a> 
                        <!-- /忘记密码 -->
                        </div>  
                        <!-- 记住我 -->
                        <label for="login_from_save" class="fl label" action-type="customTip">
                        <input type="checkbox" id="login_form_save" checked="checked"
                        node-type="savestate" tabindex="5"
                        class="checkbox">
                        <span class="text2">记住我</span>                    
                        <!-- /记住我 -->
                    </label>
                    </div>
                    <div class="info_list login_btn">
                        <a href="javascript:void(0)" class="W_btn_a btn_32px" 
                        action-type="btn_submit" node-type="submitBtn" 
                        tabindex="6">
                        <span node-type="submitStates">登录</span></a>
					</div>
                    <div class="info_list register">
						<span class="text2">还没有微博？</span>
                        <router-link to="Apply">立即注册！</router-link>
					</div>


                    </div>
                    <!-- /账号登录 -->                    
            </div>
        </div>
    </div>
</template>
<style  lang="scss" scoped>
.Box{
    background: #f2f2f5;
    padding: 20px;
    margin-bottom: 20px;
}
element.style{
    height: 1px;
    margin-top: -1px;
    visibility: hidden;
}
.unlogin{
    position: relative;
    width: 300px;
}
.unlogin .login_form{
    /* position: initial; */
    /* top: 0; */
    left: 0;
}
.unlogin .login_box{
    min-height: 280px;
    background-color: #fff;
    padding: 0 15 6 15;
    border-radius: 2px;
    // box-shadow: 0 0 2 rgb(0, 0, 0/15%);
}
.unlogin .info_header{
    position: relative;
}
.unlogin .info_header .tab{
    margin-bottom: 16px;
    padding-top: 2px;
    border-bottom: 1px solid#ccc;
    border-bottom-color:rgb(204, 204, 204,.5);
}
.unlogin .login_form{
    padding-top: 35px;
}
.clearfix{display: block;}
.unlogin .login_form .auto_login{height: 15px;}
.unlogin .info_list{margin-top: 12px;}
.fb{font-weight: 700;}
.unlogin .info_header .tab a.cur{
    border-bottom: 3px solid#fa7d3c;
    color: #000;
}
.unlogin .info_header .tab a{
    float: left;
    margin-bottom: -1px;
    width: 50%;
    text-align: center;
    font-size: 14px;
    line-height: 30px;
    transition: border;
}
.unlogin .login_box{
    position: relative;
    top: 0;
    left: 0;
}
.unlogin.login_form .password .input_wrap{
    position: relative;
    background-position: -39px -91px;
}
.unlogin .login_form .input_wrap{
    height: 28px;
    padding-top: 2px 0;
    border: 1px solid#ccc;
    border-radius: 2px;
    background-color: #FFF;
}
.text2 , .W_input , .btn_disable {
    color:#808080;
    text-decoration: none;
}
.unlogin .login_box .input_wrap .W_input{
    margin-left: 34px;
    width: 86%;
    border: none;
    box-shadow: none;
}
.info_list{
    width: 85%;
    display: block;
    margin: 0 auto;

}
/* .unlogin .login_box .password .psw{
    position: relative;
    top: 0px;
    left: 36px;
    color: #808080;
} */
.input_wrap{
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
    .el-icon-lock{
        flex-basis: 10px;
        padding-left: 20px;
        padding-top: 5px;
     }
    .icon_human{
        flex-basis: 10px;
        padding-left: 20px;
        padding-top: 5px;
    }
    .W_input{
        flex: 1;
        height: 28px;
        border-width: 1px;
        border-style: solid;
        line-height: normal;
        padding: 0 0 0 0;
        vertical-align: middle;
        outline-style: none;
        background-color: transparent;
    }
}
.unlogin .login_form .auto_login span{
    margin-left: 3px;
}
.label span{
    vertical-align: middle;
}
input, textarea, select{
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}
/* 忘记密码 */
.fr{
    float: right;
}
/* 记住密码 */
.fl{
    float: left;
}

.label{
    cursor: default;
}
.unlogin .login_form .checkbox{
    height: 13px;
    margin-top: -1px;
}
.checkbox , .radio{
    vertical-align: middle;
    margin-right: 3px;
    float: left;

}
.checkbox , .radio{
    display: block;
    content: '';
    clear: both;
}
/* 登录按钮 */
.btn_32px{
    height: 32px;
    line-height: 33px;
    font-weight: 500;
    text-align: center;
    width: 90%;
    display: block;
    margin: 0 auto;
}
.W_btn_a{
    background: #ff8140;
    border: 1px solid #f77c3d;
    color: #fff;
    // box-shadow: 0 1 2 rgb(0, 0, 0/25%);
    white-space: nowrap;
    border-radius: 2px;
    text-decoration: none;
}
.unlogin .login_form .login_btn .W_btn_a{
    padding: 0;
    display: block;
    font-size: 16px;
}
</style>